<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="文章标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="model.title" placeholder="请输入文章标题"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="文章分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
                <j-dict-select-tag placeholder="请选择文章分类" v-model="model.type" dictCode="ind_news_type"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="所属产业集群" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cid">
                <j-search-select-tag
                  placeholder="请选择所属产业集群"
                  v-model="model.cid"
                  :dict="companyNameDict"
                  :pageSize="10"
                  :async="true">
                </j-search-select-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
                <!-- <j-editor v-model="model.content" /> -->
                <vue-ueditor-wrap v-model="model.content" :config="editorConfig" :destroy="true"></vue-ueditor-wrap>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="作者" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="yysr">
                <a-input v-model="model.user" placeholder="请输入作者"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="封面图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="img">
                <j-image-upload v-model="model.img"></j-image-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <footer-tool-bar style="float:right">
        <a-button type="primary" @click="submitForm" :loading="confirmLoading">提交</a-button>
      </footer-tool-bar>
    </a-spin>
  </a-card>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import VueUeditorWrap from "vue-ueditor-wrap";

  export default {
    name: 'IndNewsForm',
    inject:['closeCurrent'],
    components: {
      VueUeditorWrap
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        twoLabelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        twoWrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/indust/indNews/add",
          edit: "/indust/indNews/edit",
          queryById: "/indust/indNews/queryById"
        },
        companyNameDict:'ind_cluster,name,id',
        editorConfig: {
          autoHeightEnabled: false,
          initialFrameHeight: 240,
          initialFrameWidth: "100%",
          zIndex: 1,
          serverUrl: "/sys/common/upload",
          toolbars: [
              [
                  // 'undo',//撤销
                  // 'bold', //加粗
                  // 'formatmatch', //格式刷
                  // 'fontsize', //字号
                  // 'redo',
                  // 'lineheight',
                  // '|',
                  // 'inserttable',
                  // 'mergecells',
                  // 'simpleupload',
                  // 'insertimage',
                  // '|',
                  // 'date',
                  // 'time',
                  // 'spechars',
                  // 'fullscreen',
                  // 'horizontal',
                  // 'source'
                  'fullscreen', 'source', 'undo', 'redo', 'bold',
                  'fontsize', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch',
                  'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist',
                  'selectall', 'cleardoc', 'drafts',
                  'rowspacingtop', 'rowspacingbottom', 'lineheight',
                  'customstyle', 'paragraph', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
                  'link', 'unlink', 'anchor',
                  'imagenone', 'imageleft', 'imageright', 'imagecenter',
                  'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo',
                  'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', 'horizontal',
                  'print', 'preview', 'searchreplace', 'help'
              
              ]
          ]

        },
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
                that.closeCurrent();
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>
<style>
.edui-default .edui-toolbar .edui-combox .edui-combox-body{
  height: 22px;
}
</style>